{% extends "oa/base.html" %}{% load i18n static %}
{% block this_css %} {% endblock %}
{% block title %} {{ data.batch_code }}-{{ data.product_name }}-{{ data.current_tank }} 详情页面 {% endblock %}
{% block content %}
<section class="wrapper">
    {% if data %}
        <div class="col-lg-8 col-lg-offset-2">
            <h3>基础信息</h3>
            <table class="table">
                <tr><th>产品批次</th><td>{{ data.batch_code }}</td><th>发酵罐</th><td>{{ data.current_tank }}</td></tr>
                <tr><th>生产状态</th><td>{{ data.product_state }}</td><th>批次容量</th><td>{{ data.total_volume }} L</td></tr>
                <tr><th>产品名称</th><td>{{ data.product_name }}</td><th>预估出酒量</th><td>{{ data.est_volume|floatformat }} L</td></tr>
                <tr><th>投料日期</th><td>{{ data.start_date }}</td><th>实际出酒量</th><td>{{ data.act_volume|floatformat }} L</td></tr>
                <tr></tr>
            </table>
        </div>
        <div class="col-lg-8 col-lg-offset-2">
            <h3>发酵监控</h3>
            <div id="container"></div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <section class="panel">
                    <header class="panel-heading"><h3>操作记录</h3></header>
                    <div class="panel-body">
                        <section id="flip-scroll">
                            <table class="table table-bordered table-striped table-condensed cf">
                                <thead>
                                    <tr>
                                        <th>操作编号</th>
                                        <th>开始时间</th>
                                        <th>截止时间</th>
                                        <th>操作</th>
                                        <th>转移至</th>
                                        <th class="text-center">负责人</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for process_record in data.process_records %}
                                    <tr>
                                        <td>{{ process_record.code }}</td>
                                        <td>{{ process_record.process_start|date:'Y-m-d H:i' }}</td>
                                        <td>{{ process_record.process_end|date:'Y-m-d H:i' }}</td>
                                        <td>{{ process_record.get_process_type_display }}</td>
                                        <td>{{ process_record.current_tank.code }}</td>
                                        <td style="text-align: center">{{ process_record.operator }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </section>
                    </div>
                </section>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <section class="panel">
                    <header class="panel-heading"><h3>灌装记录</h3></header>
                    <div class="panel-body">
                        <section id="flip-scroll">
                            <table class="table table-bordered table-striped table-condensed cf">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>灌装批次号</th>
                                        <th>产品名称</th>
                                        <th class="text-center">灌装数量</th>
                                        <th class="text-center">灌装容量/L</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for pack in data.packs %}
                                    <tr>
                                        <td>{{ pack.date|date:'Y-m-d' }}</td>
                                        <td>{{ pack.code }}</td>
                                        <td>{{ pack.name }}</td>
                                        <td class="text-center">{{ pack.pack_amount }}</td>
                                        <td class="text-center">{{ pack.liter }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </section>
                    </div>
                </section>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <section class="panel">
                    <header class="panel-heading"><h3>原料</h3></header>
                    <div class="panel-body">
                        <section id="flip-scroll">
                            <table class="table table-bordered table-striped table-condensed cf">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>出库单号</th>
                                        <th>原料批次号</th>
                                        <th>原料编号</th>
                                        <th>原料名称</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for m in data.materials %}
                                        <tr>
                                            <td style="white-space:nowrap">{{ m.date|date:'Y-m-d' }}</td>
                                            <td style="white-space:nowrap">{{ m.order_no }}</td>
                                            <td style="white-space:nowrap">{{ m.batch_code }}</td>
                                            <td style="white-space:nowrap">{{ m.material_code }}</td>
                                            <td style="white-space:nowrap">{{ m.material_name }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </section>
                    </div>
                </section>
            </div>
        </div>
    {% else %}
        <div class="col-lg-8 col-lg-offset-2"><h3>你来自何方？</h3></div>
    {% endif %}
</section>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
Highcharts.chart('container', {
    credits: {enabled: false},
    chart: {type: 'spline'},
    title: {text: '{{ data.product_name }} {{ data.batch_code }}'},
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            hour: '%H:%M',
            day: '%m-%d',
            month: '%b \'%y',
        },
        title: {text: '日期'}
    },
    yAxis: {
        title: {text: '糖度 / pH / 温度'},
        min: -5,
        max: 30
    },
    tooltip: {
        headerFormat: '{point.x:%Y-%m-%d %H:%M}<br>',
        pointFormat: '{series.name}: {point.y:.2f}'
    },
    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },
    colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
    series: [{name: 'Plato', data: [{% for d in data.plato %}[Date.UTC({{ d.year }}, {{ d.month }}, {{ d.day }}, {{ d.hour }}, {{ d.min }}), {{ d.data }}],{% endfor %}]
     }, {name: 'pH', data: [{% for d in data.ph %}[Date.UTC({{ d.year }}, {{ d.month }}, {{ d.day }}, {{ d.hour }}, {{ d.min }}), {{ d.data }}],{% endfor %}]
     }, {name: 'Real T', data: [{% for d in data.t_real %}[Date.UTC({{ d.year }}, {{ d.month }}, {{ d.day }}, {{ d.hour }}, {{ d.min }}), {{ d.data }}],{% endfor %}]
     }, {name: 'Set T', data: [{% for d in data.t_set %}[Date.UTC({{ d.year }}, {{ d.month }}, {{ d.day }}, {{ d.hour }}, {{ d.min }}), {{ d.data }}],{% endfor %}]
     }]
});

</script>

{% endblock %}